<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{$config['bbsname']}</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../app/resource/css/common.min.css?v=20160831">
    <link rel="stylesheet" type="text/css"
          href="../addons/wwr_bbs/app/resource/components/mui/mui.ext.css">
    <link rel="stylesheet" type="text/css"
          href="../addons/wwr_bbs/app/resource/components/dropload/dropload.css">
    <script type="text/javascript" src="../app/resource/js/app/util.js"></script>
    <script type="text/javascript" src="../app/resource/js/lib/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../app/resource/js/lib/mui.min.js?v=20160906"></script>
    <script type="text/javascript"
            src="../addons/wwr_bbs/app/resource/components/dropload/dropload.min.js"></script>
</head>
<body class="mui-ios mui-wechat mui-ios-9 mui-ios-9-1 mui-wechat-6 mui-wechat-6-3 mui-wechat-6-3-9">


{template 'common/nav'}

<style>
    a,a:active,a:visited,a:hover{text-decoration:none}

    .banner img {
        width: 100%;
    }

    .mui-table-view .mui-media-object {
        max-width: 60px;
        height: 60px;
        line-height: 60px;
        width: 60px;
        margin:0%;
        
    }

    .mui-media-body {
        font-size: 14px;
        line-height: 160%;
    }
    .mui-media .hits{
        font-size: 12px;color: #999;
    }
    .user_avatar img {
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }

    .user_nickname {
        font-size:16px;
    }

    .user_nickname .time {
        font-size: 12px;
        color: #333;
        float: right;
        line-height: 22px;
    }

    .nav {
        position: relative;
        padding: 10px 10px 0;
    }
    .mui-table-view-cell.mui-media{
        padding: 15px 12px;
        border-bottom: 1px solid #ddd;
    }
    .mui-slider .mui-slider-group .mui-slider-item img {
        width: 55px;
        height: 55px;
        max-width: 100%;
        max-height: 100%;
        border-radius: 50%;
    }
    .mui-slider .mui-slider-group .user_avatar img {
        width: auto;
        height: 30px;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 34px;
    }

    .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
        display: inline-block;
        width: auto;
        border: 0;
        font-size: 16px;
    }
    .bbstitle{
        color: #FFF;
        background-color: #1e731d;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        display: none;
    }
    .mui-bar-nav~.mui-content, .mui-bar-nav~.mui-slider-group {
        padding-top: 0rem;
    }

    .mui-slider-indicator .mui-slider-progress-ext {
      top: 1.55rem;
      background-color: #04be02;
    }
    .dropload-down {
        height: 300px;
    }
    .banner img {
        display:block;
    }
    .forum-list{
        margin-top: 0;
    }
    .forum-list::before{
        background-color: transparent;
    }
    .mui-slider-indicator .tabLine-color{
        top: 1.4rem;
        background-color:#d70010;
    }
    .mui-segmented-control .mui-control-item.mui-active{
        color: #d70010 !important;
    }
    .pageIcon{
        width: 11px !important;
        height: 11px !important;
        vertical-align: top;
        margin: 4px 3px 0 0;
    }
    .pageIcon-time{
        margin-top: 5px;
    }
    .mui-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 998;
        background-color: rgba(0,0,0,.3);
        overflow: hidden;
    }
</style>

<div class="mui-content">
    <div class="bbstitle">{$config['bbsname']}</div>
    <div id="slider" class="mui-slider">

        <div class="banner"><img style="height: 100px" src="{php echo(tomedia($config['headbg']));}"></div>

        <header class="mui-bar mui-bar-nav nav">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item mui-active" href="#item1mobile" data='0'>全部</a>
                    {loop $categorys $row}
                    <a class="mui-control-item" href="#item{php echo($row['id']+1);}mobile" data="{$row['id']}">{$row['cname']}</a>
                    {/loop}
                    <div id="sliderProgressBar" class="mui-slider-progress-ext tabLine-color"></div>
                </div>
            </div>
        </header>
        <div class="mui-slider-group">

            <div id="item1mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper-ext">
                    <div class="mui-scroll-ext">
                        <div class="list-content">

                        </div>
                    </div>
                </div>
            </div>
            {loop $categorys $key $row}
            <div id="item{php echo($key+2);}mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper-ext">
                    <div class="mui-scroll-ext">
                        <div class="list-content">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/loop}

        </div>
    </div>
</div>
<div class="page" style="display:none"></div>
<script>
    //初始化滚动区域

    $('.mui-content').css('overflow', 'hidden');
    $('.mui-slider-group').height($(window).height() + $(window).scrollTop());
    //nav激活
    mui.init();
    mui('.mui-bar-tab').on('tap', 'a',
        function () {
            var $this = $(this);
            if (this.getAttribute('href') != null) {
                console.log(this.getAttribute('href'));
                location.href = this.getAttribute('href');
            } else {
                return false;
            }
        })


    //上拉加载活动列表
    var loadItem = function (id, cid) {
        var counter = 0;
        // 每页展示4个
        var num = 10;
        var pageStart = 0, pageEnd = 0, thispage = 1, thispages = 50;
        // dropload
        $(id).find('.mui-scroll-ext').dropload({
            scrollArea: $(id).find('.mui-scroll-wrapper-ext'),
            loadDownFn: function (me) {
                $.ajax({
                    type: 'GET',
//                    url: "./index.php?i=2&c=entry&do=member&m=fx_activity&page=" + thispage + "&psize=" + thispages + "&op=activity&ac=ajax&status=" + status,
                    url: "{php echo $this->createMobileUrl('index')}&page="+thispage+"&psize="+thispages+"&cid="+cid+"&op=ajax",
                    dataType: 'json',
                    success: function (data) {
                        //alert(type);
                        var result = '', joinstime = '', joinetime = '', starttime = '', endtime = '', stime = new Date();
                        counter++;
                        pageEnd = num * counter;
                        pageStart = pageEnd - num;
                        for (var i = pageStart; i < pageEnd; i++) {
                            if (data.tpage == 0) {
                                result = '<div class="no-orders-at-all">'
                                    + '<div class="head-block">'
                                    + '    <div class="blank-icon mui-ext-icon mui-icon-mhuodong"></div>'
                                    + '    <p class="hint">当前没有任何信息</p>'
                                    + '    <p class="recommend-hint"></p>'
                                    + '</div></div>';
                                // 锁定
                               me.lock();
                                // 无数据
                                me.noData();
                                break;
                            }

                            result+= ' <ul class="mui-table-view forum-list"><li class="mui-table-view-cell mui-media">'
                                +' <a href="{php echo $this->createMobileUrl('detail')}&id='+data.lists[i].id+'" class="">'
                            +' <img class="mui-media-object mui-pull-left" src="'+data.lists[i].avatar+'">'
                            +' <div class="user_nickname">'+data.lists[i].nickname+'<span class="time"><img class="pageIcon pageIcon-time" src="../addons/wwr_bbs/app/resource/images/timeIcon.png">'+data.lists[i].createtime+'</span></div>'
                            +' <div class="mui-media-body">'+ data.lists[i].title+'</div>'
                            +' <div class="mui-media-body hits"><img  class="pageIcon" src="../addons/wwr_bbs/app/resource/images/browseIcon.png">浏览：'+ data.lists[i].hits+'　<img  class="pageIcon" src="../addons/wwr_bbs/app/resource/images/replyIcon.png">回复：'+ data.lists[i].replay+'　<img  class="pageIcon" src="../addons/wwr_bbs/app/resource/images/praiseIcon.png">点赞：'+ data.lists[i].zan+'</div>'
                            +' </div>'
                            +' </a>'
                            +' </li></ul>';



                            if ((i + 1) >= data.lists.length && thispage == data.tpage) {
                                // 锁定
                               me.lock();
                                // 无数据
                                me.noData();
                                break;
                            } else if ((i + 1) >= data.lists.length) {
                                thispage++;
                                counter = 0;
                                pageEnd = 0;
                                pageStart = 0;
                            }
                        }

                        $(id).find('.list-content').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();

                    },
                    error: function (xhr, type) {
                        // alert('加载失败，请刷新下重试!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
    loadItem('#item1mobile', $('.mui-control-item.mui-active').attr("data"));

    //滑动效果
    mui.init({swipeBack: false});
    (function (m) {

        var htmlFont = $("html").css("font-size").replace('px', ''),
            itemWidth = new Array(),
            itemID = new Array(),
            transX = 0;
        $(".mui-control-item").each(function (key) {
            itemWidth[key] = $(this).width();//初始化每个control-item的宽度
            itemID[key] = document.getElementById('item' + (key + 1) + 'mobile');//初始slider-item,ID
        });
        //alert($(itemID[0]).find('.mui-scroll-wrapper-ext').html());
        $('#sliderProgressBar').css("width", itemWidth[0]);


        document.getElementById('slider').addEventListener('slide', function (e) {
//            e.preventDefault();
//            $('body').hide();
//            alert('33333444')
//           $('.mui-content').hide();

            var sn = e.detail.slideNumber,//初始化当前被激活的item序号
                itemX = 0;
            //初始化每次进度条滑动的距离
            for (var i = 0; i < sn; i++) {
                itemX += itemWidth[i];
            }
            transX = itemX / htmlFont + 0.76 * sn;
            console.log(transX);
            if (sn >= 1) {
                $('#sliderProgressBar').stop().animate({left: transX + 'rem'}, 100);
                if (itemID[sn].querySelector('.mui-loading')) {
                    setTimeout(function () {
                        $('#sliderProgressBar').stop().animate({width: itemWidth[sn]}, 100);
                        itemID[sn].querySelector('.list-content').innerHTML = '';
                        loadItem(itemID[sn], $('.mui-control-item.mui-active').attr("data"));
                    }, 100);

                } else {
                    setTimeout(function () {
                        $('#sliderProgressBar').stop().animate({left: transX + 'rem', width: itemWidth[sn]}, 100);
                    }, 100);
                }
            } else {
                setTimeout(function () {
                    $('#sliderProgressBar').stop().animate({left: '0rem', width: itemWidth[0]}, 100);
                }, 100);
            }
        });
    })(mui);



</script>
</body>
</html>